<template>
    <Dashboard :menu="menu">
        <el-row>
            <el-row>
                <el-button type="primary" @click="addCoupon">新增</el-button>
            </el-row>
            <el-table :data="couponData" stripe style="margin-top:24px" @selection-change="SelectionChange">
                <!-- <el-table-column type="selection" width="50">
                </el-table-column> -->
                <el-table-column prop="name" label="名称" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="img_url" label="图片" header-align="center" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.img_url" alt="" style="width:80px;height:60px" v-if="scope.row.img_url">
                        <img src="/assets/default.png" alt="" style="width:80px;height:60px" v-else>
                    </template>
                </el-table-column>
                <el-table-column prop="limit_price" label="使用条件" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.limit_price">订单满{{scope.row.limit_price}}元可用</span>
                        <span v-else>无限制</span>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="优惠金额" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.price}}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="有效时间" header-align="center" align="center" width="150">
                    <template slot-scope="scope">
                        <el-row>{{format(scope.row.started_at)}}</el-row>
                        <el-row>{{format(scope.row.ended_at)}}</el-row>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" header-align="center" align="center">
                    <template slot-scope="scoped">
                        <el-row style="font-weight:700;color:#19be6b" v-if="scoped.row.status">开启</el-row>
                        <el-row style="font-weight:700;color:#f50" v-else>关闭</el-row>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" header-align="center" width="100">
                    <template slot-scope="scope">
                        <el-tooltip content="编辑">
                            <i class="iconfont icon-bianji1" @click='couponEdit(scope.row)' style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <i class="iconfont icon-shanchu2" @click="couponDel(scope.row)" style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin:24px 0">
                <!-- <el-col :span="12">
                    <el-button size="small" @click="couponStatus(1)">开启</el-button>
                    <el-button size="small" @click="couponStatus(0)">关闭</el-button>
                </el-col> -->
                <el-col :span="24" style="text-align:right">
                    <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
                </el-col>
            </el-row>
        </el-row>
    </Dashboard>
</template>

<script>
import Dashboard from "./../../../components/Dashboard.vue";
export default {
    components: {
        Dashboard
    },
    data() {
        return {
            menu: [
                {
                    name: "优惠券",
                    icon: "icon-youhuiquan",
                    sub: [
                        {
                            name: "优惠券列表",
                            url: "/shop/coupon/coupon"
                        }
                    ]
                }
            ],
            couponData: [],
            pagination: {},
            selectCoupon: []
        };
    },
    async asyncData({ app }) {
        let data = {};
        //优惠券列表
        const coupon = await app.$axios.$get(
            "/api/shop/home/shop/plugin/coupon/index"
        );
        if (coupon && coupon.errmsg === "ok") {
            data.couponData = coupon.data.data;
            data.pagination = coupon.data.pagination;
        }
        return data;
    },
    methods: {
        //优惠券列表
        async getCoupon() {
            let url = `/api/shop/home/shop/plugin/coupon/index?page=${
                this.pagination.page
            }`;
            const coupon = await this.$axios.$get(url);
            if (coupon && coupon.errmsg === "ok") {
                this.couponData = coupon.data.data;
                this.pagination = coupon.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getCoupon();
        },
        addCoupon() {
            this.$router.push("/shop/coupon/edit");
        },
        couponEdit(row) {
            this.$router.push({
                path: "/shop/coupon/edit",
                query: {
                    id: row.id
                }
            });
        },
        async couponDel(row) {
            const res = await this.$axios.$get(
                `/api/shop/home/shop/plugin/coupon/del?id=${row.id}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("删除成功");
                this.getCoupon();
            }
        },
        //开启关闭
        SelectionChange(val) {
            this.selectCoupon = val;
        },
        async couponStatus(status) {
            if (!this.selectCoupon.length) {
                this.$message.warning("请选择优惠券");
                return;
            }
            let ids = [];
            for (let key in this.selectCoupon) {
                ids.push(this.selectCoupon[key].id);
            }
            const res = await this.$axios.$get(
                `/api/shop/home/shop/plugin/coupon/update?id=${ids.join()}&status=${status}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success(status ? "已开启" : "已关闭");
                this.getCoupon();
            }
        }
    }
};
</script>
